<template>
    <div>
        <div class="tabList">
            <div class="tabItem" :class="{active:currentShowComponent==item.id}" v-for="(item,index) in dataList" :key="index" @click="tabClick(item)">
                {{item.name}}
                <!-- <img v-show="!item.hasApply" src="../../assets/informationEntry/flag.png"> -->
            </div>
        </div>

        <div class="content">
<!--            <img class="background" src="../../assets/background_1.png">-->
            
            <keep-alive>
                <component :is="currentShowComponent"></component>
            </keep-alive>
        </div>

    </div>
</template>

<script>

import PeopleList from "./PeopleList";
import MatchingPeople from "./MatchingPeople";
import NonconformingPersons from "./NonconformingPersons";

export default {
    name:"participationManagement",
    components:{
        PeopleList,
        MatchingPeople,
        NonconformingPersons
    },
    data(){
        return {
            dataList:[
                {id:"PeopleList",name:"拟参评人员"},
                {id:"MatchingPeople",name:"拟参评符合人员"},
                {id:"NonconformingPersons",name:"拟参评不符合人员"},
            ],
            currentShowComponent:"PeopleList",
        }
    },
    mounted(){
        var page = this.$route.query.p;
        console.log(page);
        
        if(page != undefined){
            this.currentShowComponent = page;
        }
    },
    methods:{
        tabClick(item){
            this.currentShowComponent = item.id;
            this.modifyUrlParam(item.id);
        },
        modifyUrlParam(page){
            var query = this.$router.history.current.query;
            var path = this.$router.history.current.path;

            // 对象的拷贝
            var newQuery = JSON.parse(JSON.stringify(query));
            newQuery.p = page;
            this.$router.push({ path, query: newQuery });
        }
    }
}
</script>

<style scoped>

.tabList{
    display:flex;
}
.tabList .tabItem{
    position: relative;
    padding:7px 14px;
    margin-right: 1px;
    font-size: 14px;
    color: #175AFF;
    cursor: pointer;

    background-image:url(../../assets/informationEntry/tab.png);
    background-size:100% 100%;    /* 背景图完整覆盖容器，但宽高比例变了，图片变形。*/
    background-repeat:no-repeat;
    background-position:bottom;   /* left/center/right top/center/bottom;*/
}
.tabList .tabItem.active{
    color: white;
    background: #31478f;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
}
.tabList .tabItem>img{
    position: absolute;
    top: 0px;
    right: 5px;
    width:7px;
}
.tabList .operation{
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 20px;
}
.tabList .operation>button{
    padding: 6px 15px;
}
.content{
    padding: 20px 33px;
    background: white;
    position: relative;
    min-height: 500px;
}
.content>.background{
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    max-height: 100%;
    opacity: 0.08;
}

</style>